<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详细笔记</title>
    <!-- 引入重置样式表 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入公共的样式表 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入当前页面的样式表 -->
    <link rel="stylesheet" href="./css/notes.css">



    <style>

    </style>
</head>

<body>
    <!-- 头部导航栏 -->
    <div class="topbar-wrapper">
        <div class="topbar clearfix">

            <!-- 左侧文字logo -->
            <div class="logo">
                <h1 id="logotitle">YaoYunYa</h1>
            </div>

            <!-- 右侧菜单 -->
            <ul class="right-menu" id="right-menu">
                <li><a class="ap" href="./index.html">首页
                    <p ></p>
                </a>
                </li>
                <li><a href="./schoolLife.html" class="ap">校园生活</a>
                    <p></p>
                </li>
                <li><a href="./interest.html" class="ap">兴趣&爱好</a>
                    <p></p>
                </li>
                <li><a href="./notes.html" class="ap">我的笔记</a>
                    <p class="active"></p>
                </li>
            </ul>

        </div>

    </div>


    <div class="title">

        <h2 style="text-align: center;">HTML5制作 <div class="chilun"></div></h2>
        <h3 style="color: white; font-size: 26px;">日期:2022.09.10 10:20:45</h3>
    </div>
    <div style="width: 80%;margin: 30px auto;box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); padding: 20px;">
        <span style="font-size: 22px;">
            HTML<br>
            网页的具体内容和结构<br>
            <br><br>
            CSS<br>
            网页的样式（美化网页最重要的一块）<br>
            <br>
            JavaScript<br>
            网页的交互效果，比如对用户鼠标事件作出响应<br>
            <br>
            HTML<br><br><br>
            什么是HTML<br>
            HTML的全称是HyperTextMa<br><br>rkupLanguage，超文本标记语言<br>
            其实它就是文本，由浏览器负责将它解析成具体的网页内容<br>
            
            比如，浏览器会将下面的HTML代码<br>
            CSS选择器<br>
            选择器的作用<br>
            选择对应的标签，为之添加样式<br>
            <br>
            标签选择器 根据标签名找到标签<br>
            类选择器 标签可以有多个类<br>
            id选择器 id是唯一的，不能一样<br>
            选择器组合 中间不留空格，粘在一起<br>
            后代选择器 中间一个空格，不管嵌套多少层<br>
            相邻兄弟选择器<br>
            属性选择器<br>
            选择器优先级<br>
针对性越强，优先级越高<br>
选择器的权值<br>
通配选择符（*）:0<br>
标签：1<br>
类：10<br>
属性：10<br>
伪类：10<br>
伪元素：1<br>
id：100<br><br>
important：1000<br>

原则：选择器的权值加到一起，大的优先；如果权值相同，后定义的优先<br>
important > 内联 > id > 类 > 标签｜伪类｜属性选择器 > 伪元素 > 通配符 > 继承<br>

CSS标签的类型<br>
HTML有N多标签，根据显示的类型，主要可以分为2大类<br>
块级标签，独占一行的标签<br>
行内标签（内联标签），多个行内标签<br>能同时显示在一行<br>

修改标签的显示类型<br>
CSS中有个display属性，能修改标签的显示类型<br>
————————————————<br>
选择器优先级<br>
针对性越强，优先级越高<br>
选择器的权值<br>
通配选择符（*）:0<br>
标签：1<br>
类：10
属性：10
伪类：10
伪元素：1
id：100
important：1000

原则：选择器的权值加到一起，大的优先；如果权值相同，后定义的优先<br>
important > 内联 > id > 类 > 标签｜伪类｜属性选择器 > 伪元素 > 通配符 > 继承

CSS标签的类型
HTML有N多标签，根据显示的类型，主要可以分为2大类
块级标签，独占一行的标签
行内标签（内联标签），多个行内标签能同时显示在一行

修改标签的显示类型
CSS中有个display属性，能修改标签的显示类型
————————————————
版权声明：本文为CSDN博主「赵不懂」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_33351410/article/details/51910266
        </span>
    </div>







    <!-- 版权 -->
    <div class="banquan">

        <p>Keep on going never give up.</p>
        <p>广西工业职业技术学院 软件2131</p>
        <p>廖钧涛 制作</p>



    </div>

</body>

</html>